<template>
  <div class="yz-page">
    <div class="yz-daterange">
      <span class="yz-daterange-title">统计区间</span>
      <div style="display: flex;justify-content: space-between;width: 100%;padding-top: 10px">
        <el-date-picker
            v-model="form.tjqj"
            :change="selectDate()"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            size="small"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <el-button style="margin-right: 20px;" type="primary" plain size="medium" @click="gotoSystem">进入系统
        </el-button>
      </div>
    </div>
    <div class="yz-content">
      <div class="yz-content-left">
        <div class="yz-content-left-top">
          <div class="yz-content-left-top-box">
            <div class="yz-content-left-top-box-content">
              <div class="yz-content-left-top-box-content-title"><span>重大事件监督</span></div>
              <div class="yz-content-left-top-box-content-data">
                <div class="yz-content-left-top-box-content-data-top">
                  <div class="yz-content-left-top-box-content-data-top-box" v-loading="loading_wgla">
                    <div id="echart_wgla" class="echartWglaCss"></div>
                  </div>
                  <div class="yz-content-left-top-box-content-data-top-box" v-loading="loading_yabs">
                    <div id="echart_yabs" class="echartWglaCss"></div>
                  </div>
                  <div class="yz-content-left-top-box-content-data-top-box" v-loading="loading_wggw">
                    <div id="echart_wggw" class="echartWglaCss"></div>
                  </div>
                </div>
                <div class="yz-content-left-top-box-content-data-bottom">
                  <div class="yz-content-left-top-box-content-data-bottom-box" v-loading="loading_tyzx">
                    <div id="echart_tyzx" class="echartTyzxCss"></div>
                  </div>
                  <div class="yz-content-left-top-box-content-data-bottom-box" v-loading="loading_wgjjz">
                    <div id="echart_wgjjz" class="echartTyzxCss"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yz-content-left-bottom">
          <div class="yz-content-left-bottom-box">
            <div class="yz-content-left-bottom-box-content">
              <div class="yz-content-left-bottom-box-content-title"><span>重要节点监督</span></div>
              <div class="yz-content-left-bottom-box-content-data">
                <div class="yz-content-left-bottom-box-content-data-top">
                  <div class="yz-content-left-bottom-box-content-data-top-title">立案节点监督</div>
                  <div class="yz-content-left-bottom-box-content-data-top-content">
                    <div class="yz-content-left-bottom-box-content-data-top-content-box" v-loading="loading_yabl">
                      <div class="yz-content-left-bottom-box-content-data-top-content-box-item">
                        <div class="yz-content-left-bottom-box-content-data-top-content-box-data">{{ kt3_yabl }}件</div>
                        <div class="yz-content-left-bottom-box-content-data-top-content-box-name">有案不立</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="yz-content-left-bottom-box-content-data-top">
                  <div class="yz-content-left-bottom-box-content-data-top-title">审判节点监督</div>
                  <div class="yz-content-left-bottom-box-content-data-top-content">
                    <div class="yz-content-left-bottom-box-content-data-top-content-box" v-loading="loading_ycsx">
                      <div class="yz-content-left-bottom-box-content-data-top-content-box-item">
                        <div class="yz-content-left-bottom-box-content-data-top-content-box-data">{{ kt3_ycsx }}件</div>
                        <div class="yz-content-left-bottom-box-content-data-top-content-box-name">延长审限</div>
                      </div>
                    </div>
                    <div class="yz-content-left-bottom-box-content-data-top-content-box" v-loading="loading_tswg">
                      <div class="yz-content-left-bottom-box-content-data-top-content-box-item">
                        <div class="yz-content-left-bottom-box-content-data-top-content-box-data">{{ kt3_tswg }}件</div>
                        <div class="yz-content-left-bottom-box-content-data-top-content-box-name">庭审违规</div>
                      </div>
                    </div>
                    <div class="yz-content-left-bottom-box-content-data-top-content-box" v-loading="loading_xssc">
                      <div class="yz-content-left-bottom-box-content-data-top-content-box-item">
                        <div class="yz-content-left-bottom-box-content-data-top-content-box-data">{{ kt3_xssc }}件</div>
                        <div class="yz-content-left-bottom-box-content-data-top-content-box-name">形式审查</div>
                      </div>
                    </div>
                    <div class="yz-content-left-bottom-box-content-data-top-content-box" v-loading="loading_slcq">
                      <div class="yz-content-left-bottom-box-content-data-top-content-box-item">
                        <div class="yz-content-left-bottom-box-content-data-top-content-box-data">{{ kt3_slcq }}件</div>
                        <div class="yz-content-left-bottom-box-content-data-top-content-box-name">审理超期</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="yz-content-left-bottom-box-content-data-top">
                  <div class="yz-content-left-bottom-box-content-data-top-title">执行节点监督</div>
                  <div class="yz-content-left-bottom-box-content-data-top-content">
                    <div class="yz-content-left-bottom-box-content-data-top-content-box" v-loading="loading_zxcq">
                      <div class="yz-content-left-bottom-box-content-data-top-content-box-item">
                        <div class="yz-content-left-bottom-box-content-data-top-content-box-data">{{ kt3_zxcq }}件</div>
                        <div class="yz-content-left-bottom-box-content-data-top-content-box-name">执行超期</div>
                      </div>
                    </div>
                    <div class="yz-content-left-bottom-box-content-data-top-content-box" v-loading="loading_wgzx">
                      <div class="yz-content-left-bottom-box-content-data-top-content-box-item">
                        <div class="yz-content-left-bottom-box-content-data-top-content-box-data">{{ kt3_wgzx }}件</div>
                        <div class="yz-content-left-bottom-box-content-data-top-content-box-name">违规执行</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="yz-content-middle">
        <div class="yz-content-middle-top">
          <div class="yz-content-middle-top-box">
            <div class="yz-content-middle-top-box-content">
              <div class="yz-content-middle-top-box-content-title"><span>今日总览</span></div>
              <div class="yz-content-middle-top-box-content-data">
                <div class="yz-content-middle-top-box-content-data-box">
                  <div class="yz-content-middle-top-box-content-data-box-title">今日新增案件风险数</div>
                  <div class="yz-content-middle-top-box-content-data-box-data">
                    <div class="yz-content-middle-top-box-content-data-box-data-left" v-loading="loading_jrzl_aj">
                      <div class="yz-content-middle-top-box-content-data-box-data-left-box"
                           @click="goToChoseCase"
                           v-for="item in jrzl_ajfxs">{{ item }}
                      </div>
                    </div>
                    <div class="yz-content-middle-top-box-content-data-box-data-right">
                      <div class="yz-content-middle-top-box-content-data-box-data-right-top"
                           v-loading="loading_jrzl_aj_g">
                        <div class="yz-content-middle-top-box-content-data-box-data-right-top-name">高风险</div>
                        <div class="yz-content-middle-top-box-content-data-box-data-right-top-data">{{ jrzl_aj_g }}
                        </div>
                      </div>
                      <div class="yz-content-middle-top-box-content-data-box-data-right-top"
                           v-loading="loading_jrzl_aj_z">
                        <div class="yz-content-middle-top-box-content-data-box-data-right-top-name">中风险</div>
                        <div class="yz-content-middle-top-box-content-data-box-data-right-top-data">{{ jrzl_aj_z }}
                        </div>
                      </div>
                      <div class="yz-content-middle-top-box-content-data-box-data-right-top"
                           v-loading="loading_jrzl_aj_d">
                        <div class="yz-content-middle-top-box-content-data-box-data-right-top-name">低风险</div>
                        <div class="yz-content-middle-top-box-content-data-box-data-right-top-data">{{ jrzl_aj_d }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="yz-content-middle-top-box-content-data-box">
                  <div class="yz-content-middle-top-box-content-data-box-title">今日新增人员风险数</div>
                  <div class="yz-content-middle-top-box-content-data-box-data">
                    <div class="yz-content-middle-top-box-content-data-box-data-left" v-loading="loading_jrzl_ry">
                      <div class="yz-content-middle-top-box-content-data-box-data-left-box" v-for="item in jrzl_ryfxs">
                        {{ item }}
                      </div>
                    </div>
                    <div class="yz-content-middle-top-box-content-data-box-data-right">
                      <div class="yz-content-middle-top-box-content-data-box-data-right-top"
                           v-loading="loading_jrzl_ry_g">
                        <div class="yz-content-middle-top-box-content-data-box-data-right-top-name">高风险</div>
                        <div class="yz-content-middle-top-box-content-data-box-data-right-top-data">{{ jrzl_ry_g }}
                        </div>
                      </div>
                      <div class="yz-content-middle-top-box-content-data-box-data-right-top"
                           v-loading="loading_jrzl_ry_z">
                        <div class="yz-content-middle-top-box-content-data-box-data-right-top-name">中风险</div>
                        <div class="yz-content-middle-top-box-content-data-box-data-right-top-data">{{ jrzl_ry_z }}
                        </div>
                      </div>
                      <div class="yz-content-middle-top-box-content-data-box-data-right-top"
                           v-loading="loading_jrzl_ry_d">
                        <div class="yz-content-middle-top-box-content-data-box-data-right-top-name">低风险</div>
                        <div class="yz-content-middle-top-box-content-data-box-data-right-top-data">{{ jrzl_ry_d }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yz-content-middle-middle">
          <div class="yz-content-middle-middle-box">
            <div class="yz-content-middle-middle-box-content">
              <div class="yz-content-middle-middle-box-content-title"><span>存量案件风险统计</span></div>
              <div class="yz-content-middle-middle-box-content-data">
                <div class="yz-content-middle-middle-box-content-data-left" v-loading="loading_ajfxtj_1">
                  <div id="echart_fxtj_1" class="echartFxtjCss"></div>
                </div>
                <div class="yz-content-middle-middle-box-content-data-left" v-loading="loading_ajfxtj_2">
                  <div id="echart_fxtj_2" class="echartFxtjCss"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yz-content-middle-bottom">
          <div class="yz-content-middle-bottom-box">
            <div class="yz-content-middle-bottom-box-content">
              <div class="yz-content-middle-bottom-box-content-title"><span>消息预警</span></div>
              <div class="yz-content-middle-bottom-box-content-data">
                <el-table
                    v-loading="tableShow2"
                    :data="tableData2"
                    style="height: 150px"
                    stripe
                    size="mini"
                    :header-cell-style="{textAlign: 'center',verticalAlign : 'center'}">
                  <el-table-column label="序号" :index="getIndex" type="index" align="center"
                                   width="60"></el-table-column>
                  <el-table-column prop="caseId" label="案号" align="center"></el-table-column>
                  <el-table-column prop="handleRemark" label="处理意见" align="center"></el-table-column>
                  <el-table-column prop="pushUserName" label="推送人姓名" align="center"></el-table-column>
                  <el-table-column prop="createDate" label="推送日期" align="center"></el-table-column>
                </el-table>
                <div style="display: flex;justify-content: center;">
                  <el-pagination
                      small
                      @current-change="current_change2"
                      @size-change="handleSizeChange2"
                      layout="total, sizes, prev, pager, next"
                      :total="totalCount2">
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="yz-content-right">
        <div class="yz-content-right-top">
          <div class="yz-content-right-top-box">
            <div class="yz-content-right-top-box-content">
              <div class="yz-content-right-top-box-content-title"><span>重要案件监督</span></div>
              <div class="yz-content-right-top-box-content-data" v-loading="loading_zyajjd">
                <div id="echart_zyajjd" class="echartFxtjCss"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="yz-content-right-bottom">
          <div class="yz-content-right-bottom-box">
            <div class="yz-content-right-bottom-box-content">
              <div class="yz-content-right-bottom-box-content-title"><span>重要人员监督</span></div>
              <div class="yz-content-right-bottom-box-content-data" v-loading="loading_zyryjd">
                <div id="echart_zyryjd" class="echartZyryjdCss"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="./index_yz.js"></script>

<style scoped>

.yz-page {
  height: 100%;
  background-color: #F0F1F6;
  height: calc(100vh - 10px);
  overflow-x: auto;
}

.yz-daterange {
  display: flex;
  align-items: center;
  height: 20px;
  margin-top: 10px;
  width: 100%;

  .yz-daterange-title {
    font-size: 12px;
    margin-left: 20px;
    width: 60px;
  }
}

.yz-content {
  height: calc(100vh - 120px);
  display: flex;

  .yz-content-left {
    width: 27%;
    margin-right: 10px;

    .yz-content-left-top {
      height: 53%;

      .yz-content-left-top-box {
        width: 100%;
        height: 100%;
        margin-top: 20px;

        .yz-content-left-top-box-content {
          width: 100%;
          height: 100%;
          border-radius: 8.5px;
          background-color: rgb(255, 255, 255);

          .yz-content-left-top-box-content-title {
            color: rgb(51, 51, 51);
            font-size: 18px;
            font-weight: bold;
            padding: 10px;
          }

          .yz-content-left-top-box-content-data {
            height: calc(100% - 50px);

            .yz-content-left-top-box-content-data-top {
              height: 50%;
              display: flex;

              .yz-content-left-top-box-content-data-top-box {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: right;
              }
            }

            .yz-content-left-top-box-content-data-bottom {
              height: 50%;
              display: flex;

              .yz-content-left-top-box-content-data-bottom-box {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: left;
              }
            }
          }
        }
      }
    }

    .yz-content-left-bottom {
      height: 50%;

      .yz-content-left-bottom-box {
        width: 100%;
        height: 100%;
        padding-top: 10px;

        .yz-content-left-bottom-box-content {
          width: 100%;
          height: 100%;
          border-radius: 8.5px;
          background-color: rgb(255, 255, 255);

          .yz-content-left-bottom-box-content-title {
            height: 50px;
            color: rgb(51, 51, 51);
            font-size: 18px;
            font-weight: bold;
            padding: 10px;
          }

          .yz-content-left-bottom-box-content-data {
            height: calc(100% - 50px);

            .yz-content-left-bottom-box-content-data-top {
              height: 33%;
              padding-left: 20px;

              .yz-content-left-bottom-box-content-data-top-title {
                color: rgb(255, 158, 34);
                font-size: 14px;
                font-weight: bold;
                height: 20px;
              }

              .yz-content-left-bottom-box-content-data-top-content {
                display: flex;
                height: calc(100% - 20px);

                .yz-content-left-bottom-box-content-data-top-content-box {
                  width: 25%;
                  height: 100%;
                  color: rgb(0, 157, 255);
                  font-weight: bold;
                  font-size: 15px;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  .yz-content-left-bottom-box-content-data-top-content-box-item {
                    .yz-content-left-bottom-box-content-data-top-content-box-data {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    }

                    .yz-content-left-bottom-box-content-data-top-content-box-name {
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .yz-content-middle {
    width: 46%;

    .yz-content-middle-top {
      height: 28%;

      .yz-content-middle-top-box {
        width: 100%;
        height: 100%;
        padding: 20px;
        padding-left: 0px;

        .yz-content-middle-top-box-content {
          width: 100%;
          height: 100%;
          border-radius: 8.5px;
          background-color: rgb(255, 255, 255);

          .yz-content-middle-top-box-content-title {
            height: 50px;
            color: rgb(51, 51, 51);
            font-size: 18px;
            font-weight: bold;
            padding-top: 10px;
            padding-left: 10px;
          }

          .yz-content-middle-top-box-content-data {
            height: calc(100% - 50px);
            display: flex;
            padding-left: 5%;
            padding-right: 5%;
            padding-bottom: 2%;

            .yz-content-middle-top-box-content-data-box {
              flex: 1;
              padding: 10px;

              .yz-content-middle-top-box-content-data-box-title {
                font-size: 11px;
                height: 20px;
              }

              .yz-content-middle-top-box-content-data-box-data {
                height: calc(100% - 20px);
                display: flex;

                .yz-content-middle-top-box-content-data-box-data-left {
                  width: 60%;
                  display: flex;
                  justify-content: center;
                  align-items: center;

                  .yz-content-middle-top-box-content-data-box-data-left-box {
                    cursor: pointer;
                    flex: 1;
                    background-color: rgb(0, 157, 255);
                    border-radius: 5px;
                    margin: 10px 3px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: white;
                    font-size: 40px;
                    font-weight: bold;
                    max-height: 60px;
                    min-height: 60px;
                    max-width: 40px;
                    min-width: 20px;
                  }
                }

                .yz-content-middle-top-box-content-data-box-data-right {
                  width: 40%;

                  .yz-content-middle-top-box-content-data-box-data-right-top {
                    height: 33%;
                    display: flex;

                    .yz-content-middle-top-box-content-data-box-data-right-top-name {
                      width: 60%;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      font-size: 13px;
                    }

                    .yz-content-middle-top-box-content-data-box-data-right-top-data {
                      width: 40%;
                      display: flex;
                      justify-content: left;
                      align-items: center;
                      font-size: 14px;
                      font-weight: bold;
                      color: rgb(255, 150, 14);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .yz-content-middle-middle {
      height: 35%;
      margin-top: 30px;
      margin-bottom: 20px;

      .yz-content-middle-middle-box {
        width: 100%;
        height: 100%;

        .yz-content-middle-middle-box-content {
          width: 100%;
          height: 100%;
          border-radius: 8.5px;
          background-color: rgb(255, 255, 255);

          .yz-content-middle-middle-box-content-title {
            height: 50px;
            color: rgb(51, 51, 51);
            font-size: 18px;
            font-weight: bold;
            padding-top: 10px;
            padding-left: 10px;
          }

          .yz-content-middle-middle-box-content-data {
            height: calc(100% - 50px);
            display: flex;

            .yz-content-middle-middle-box-content-data-left {
              width: 50%;
              height: 100%;
            }
          }
        }
      }
    }

    .yz-content-middle-bottom {
      height: 37%;

      .yz-content-middle-bottom-box {
        width: 100%;
        height: 100%;

        .yz-content-middle-bottom-box-content {
          width: 100%;
          height: 100%;
          border-radius: 8.5px;
          background-color: rgb(255, 255, 255);

          .yz-content-middle-bottom-box-content-title {
            height: 50px;
            color: rgb(51, 51, 51);
            font-size: 18px;
            font-weight: bold;
            padding: 10px;
          }

          .yz-content-middle-bottom-box-content-data {
            height: calc(100% - 50px);
            padding: 0px 15px;
          }
        }
      }
    }
  }

  .yz-content-right {
    width: 27%;

    .yz-content-right-top {
      height: 53%;

      .yz-content-right-top-box {
        width: 100%;
        height: 100%;
        padding-top: 20px;
        padding-left: 10px;

        .yz-content-right-top-box-content {
          width: 100%;
          height: 100%;
          border-radius: 8.5px;
          background-color: rgb(255, 255, 255);

          .yz-content-right-top-box-content-title {
            height: 50px;
            color: rgb(51, 51, 51);
            font-size: 18px;
            font-weight: bold;
            padding: 10px;
          }

          .yz-content-right-top-box-content-data {
            height: calc(100% - 50px);
          }
        }
      }
    }

    .yz-content-right-bottom {
      margin-top: 30px;
      margin-left: 10px;
      height: 47%;

      .yz-content-right-bottom-box {
        width: 100%;
        height: 100%;

        .yz-content-right-bottom-box-content {
          padding: 10px;
          width: 100%;
          height: 100%;
          border-radius: 8.5px;
          background-color: rgb(255, 255, 255);

          .yz-content-right-bottom-box-content-title {
            height: 50px;
            color: rgb(51, 51, 51);
            font-size: 18px;
            font-weight: bold;
          }

          .yz-content-right-bottom-box-content-data {
            height: calc(100% - 50px);
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}

/deep/ .el-date-editor .el-range-separator {
  width: auto;
}

.echartWglaCss {
  width: 90%;
  height: 90%;
  max-width: 120px;
  min-width: 120px;
}

.echartTyzxCss {
  width: 90%;
  height: 90%;
  max-width: 120px;
  min-width: 120px;
}

.echartFxtjCss {
  width: 100%;
  height: 100%;
}

.echartZyryjdCss {
  width: 90%;
  height: 90%;
}

/deep/ .el-table th {
  background: transparent;
}

/deep/ .el-table--mini td {
  padding: 2px;
}

/deep/ .el-table .cell {
  font-size: 10px;
}

/deep/ .el-table th > .cell {
  font-size: 10px;
  font-weight: bold;
}

/deep/ .el-pagination__sizes .el-input .el-input__inner {
  font-size: 10px;
}

/deep/ .el-pagination {
  padding: 0px;
  padding-top: 10px;
  font-size: 10px;
  font-weight: normal;
}

/deep/ .el-input--mini .el-input__inner {
  height: 24px;
}

/deep/ .el-table::before {
  width: 0px;
}
</style>
